<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    .active{
      color: red;
    }
  </style>

</head>
<body>

<div id="app">
<!--    <h2 class="active">{{message}}</h2>-->
<!--    <h2 :class="active">{{message}}</h2>-->

<!--  <h2 v-bind:class = "{key1:value1,key2:value2}">{{message}}</h2>-->
<!--  <h2 v-bind:class = "{类名1:boolean,类名2：boolean}">{{message}}</h2>-->
  <h2 class="title" v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
  <h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
<!--  此处用到了两个class，虽然是分开写的，实际上VUE会把两个class进行合并-->
<button v-on:click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const vue = new Vue({
        el:'#app',
        data:{
            message:'你好呀',
            isActive:true,
            isLine:true,

        },
        methods:{
            btnClick:function () {
              this.isActive = !this.isActive
            },
            getClasses:function () {
              return {active:this.isActive,line:this.isLine}
            }
        }

    })
</script>

</body>
</html>